<template>
  <div class="emergency-situation">
    <div class="title">
      <div class="left-tab" @click="tabChange(0)"></div>
      <p class="sub-title" @click="tabChange(1)">其他行业预警</p>
    </div>
    <div class="main">
      <div :class="flag === 0 ? 'left-part' : 'right-part'"></div>
      <EventsTrend :flag="flag" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import EventsTrend from './eventsTrend/index.vue';

const flag = ref(0)

function tabChange(index: number) {
  flag.value = index
}

defineComponent({ name: 'EmergencySituation' });
</script>

<style scoped lang="scss">
.emergency-situation {
  @apply w-full h-[calc(100%-424px)];

  .title {
    @apply w-full h-[57px] relative;
    background: url('./assets/title.png') no-repeat center;

    .left-tab {
      @apply w-[180px] h-[57px] absolute left-[40px] top-0 cursor-pointer;
    }

    .sub-title {
      @apply absolute left-[253px] top-[-2px] font-bold text-[26px] text-[#fff] cursor-pointer;
      font-family: Alibaba PuHuiTi;
      text-shadow: 1px 3px 2px rgba(0,0,0,0.4);
      font-style: italic;
    }
  }

  .main {
    @apply w-full h-[419px] mt-[10px] grid grid-cols-2 gap-[48px];

    .left-part {
      @apply w-full h-full;
      background: url('./assets/left.png') no-repeat center;
      background-size: contain;
    }

    .right-part {
      @apply w-full h-full;
      background: url('./assets/right.png') no-repeat center;
      background-size: contain;
    }
  }
}
</style>
